<template>
  <div>
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="cancel" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <div class="title">选择品牌</div>
      </div>
    </div>

    <div class="search-car-brand-box" id="brand-box">
      <div class="box-popup-box" :style="'width:'+Wpopup+'%'">
        <div class="search-car-list" v-if="carBrand.brand">
          <span><img class="img" :src="img(carBrand.brand_logo)"/></span>
          <div class="tit">{{carBrand.brand}}</div>
        </div>
        <div class="search-car-tit">
          <div class="tit">选择车系</div>
        </div>
        <div class="search-car-list" @click="getCarID(0,0)" v-if="addTypes==0">
          <div class="tit">不限车系</div>
        </div>
        <div class="search-car-list" @click="getCarID(item.series_id,item)" v-for="(item,index) in seriesArr">
          <span class="car"><img class="img-car" :src="img(item.thumb)"/></span>
          <div class="tit">{{item.series_name}}</div>
        </div>
      </div>

      <div class="box-popup-box" :style="'width:'+cPopup+'%'">
        <div class="search-car-list" v-if="carBrand.brand">
          <div class="tit">
            <a class="item-sea" :class="{'active':carActive==0}" @click="getSeaCar(0)">全部</a>
            <a class="item-sea" :class="{'active':carActive==1}" @click="getSeaCar(1)">自动挡</a>
            <a class="item-sea" :class="{'active':carActive==2}" @click="getSeaCar(2)">手动自挡</a>
          </div>
        </div>
        <div class="search-car-tit">
          <div class="tit">选择车辆款型</div>
        </div>
        <div class="search-car-list" @click="getCar(item)" v-for="(item,index) in carArr">
          <span class="car"><img class="img-car" :src="img(item.series_thumb)"/></span>
          <div class="tit">{{item.car_name}}&nbsp;{{item.car_case}}&nbsp;{{item.series_max}}</div>
        </div>
      </div>

      <van-index-bar :sticky-offset-top="offTop">

        <template v-for="(item,index) in firstArr">
          <van-index-anchor class="search-car-tit" :index="item.brand_first"/>

          <template v-for="(vo,key) in list">
            <div class="search-car-list" :class="{'active':carBrand.brand_id==vo.brand_id}" @click="getCarList(vo)" v-if="item.brand_first==vo.brand_first">
              <span><img class="img" :src="img(vo.brand_logo)"/></span>
              <div class="tit">{{vo.brand}}</div>
            </div>
          </template>
        </template>

      </van-index-bar>
    </div>
  </div>

</template>

<script>
  export default {
    name: "SearchCar",
    components: {},
    data() {
      return {
        offTop: 100,
        sticky: true,
        show:false,
        overlay:false,
        popupShow:false,
        Wpopup:0,
          cPopup:0,

          firstArr:[],

          carBrand:[],
        carSeries:[], //车系ID
        carSeries_id:0, //车系ID
        car:[], //车ID

          list:[],
          seriesArr:[],
          carArr:[],

          types:this.type|0,
          addTypes:this.addType|0,
          carActive:0,
      }
    },
      props:['type','addType'],
    computed: {},
    mounted: function () {
        this.init();
    },
    methods: {
        init(){
            this.$api.car.getBrand().then(res=>{
                var res=res.data;

                this.list=res.data;

                const re = new Map();
                this.firstArr=this.list.filter((arr) => !re.has(arr.brand_first) && re.set(arr.brand_first, 1))
            });
        },
      back() {
        var data={
          carBrand:this.carBrand,
          carSeries:this.carSeries,
          car:this.car,
        };
          window.scrollTo(0,0);
        this.$emit('seaData',data);
      },
        cancel(){
            window.scrollTo(0,0);
            this.$emit('cancel');
        },

      getCarList(item) {
        this.carBrand=item;
          this.Wpopup=70;
          this.cPopup=0;

          this.$api.car.getSeries({id:item.brand_id,type:this.addTypes}).then(res=>{
              var res=res.data;

              this.seriesArr=res.data;
          });
      },
      getCarID(id,item){
        this.carActive=0;
            if(this.types==1){
                this.carSeries=item;
                this.back();
                return false;
            }

            this.carSeries_id=item.series_id;

          this.$api.car.getCar({id:item.series_id}).then(res=>{
              var res=res.data;

              if(res.data.length>0){
                  this.Wpopup=0;
                  this.cPopup=70;
                  this.carArr=res.data;
              }else{
                  this.carArr=[];
                  this.car=[];
                  this.back();
              }

          });

        this.carSeries=item;
      },

        getSeaCar(index){

            this.carActive=index;

            this.$api.car.getCar({id:this.carSeries_id,type:index}).then(res=>{
                var res=res.data;

                if(res.data.length>0){
                    this.carArr=res.data;
                }else{
                    this.carArr=[];
                    this.car=[];
                }

            });
        },

        getCar(item){
            this.car=item;
            this.back();
        },

    },
  }
</script>
